<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h3>{{title}}</h3><button @click="change">改标题</button>
        <ul>
            <li v-for="(item,idx) in data" :key="idx">
                {{item.name}}
                <button @click="del(idx)">-</button>
                {{item.num}}
                <button @click="add(idx)">+</button>
            </li>
        </ul>
        <p>总数量：{{allNum}}</p>
    </div>
</body>
<script src="../libs/vue3.js"></script>
<script>
    const {createApp, ref, reactive, onCreated, onMounted, onBeforeMount} = Vue;

    createApp({
        setup(){
            // setup本身就发生在实例创建的阶段，没有创建之前和创建之后的生命周期
            // console.log(this);

            const msg = ref(1);
            msg.value

            const add = ()=>{}
            add()

            onMounted(()=>{
                console.log("挂载之后")
            })
            onBeforeMount(()=>{
                console.log("挂载之前")
            })
        }
    }).mount("#app");

</script>
</html>